<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作属性</title>
    <!--修改元素的大小、颜色、位置等样式-->
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        .first {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 20px;
        }
        
        .change {
            width: 300px;
            height: 300px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <!--行内式操作：element.style 元素修改的比较少-->
    <div></div>
    <script>
        //修改的权重相当于内嵌式
        var div = document.querySelector('div');
        div.onclick = function() {
            this.style.backgroundColor = 'purple';
            div.style.width = '250px';
        }
    </script>
    <!-- 类名样式操作:element.className 修改的元素比较多   相当于要执行时才给标签添加属性 -->
    <div class="first">

    </div>
    <script>
        var change = document.querySelector('.first');
        change.onclick = function() {
            this.className = ' change'; //如果原本就有类名的话，修改后会覆盖掉原来的那一个
            //如果想保留原来的那一个类名，可以将两个都写上 this.className='first change';
        }
    </script>
    <!-- 自定义的属性操作：自定义的属性在H5中有一个自己的命名规范：用data-自定义名     -->
    <!-- 在实际的开发过程中，一般有很多的属性值，我们程序员可以添加一些自己设置的属性值，这个时候用getattribute（''）;来调用 -->
    <div class="format" zidingyi="1">

    </div>
    <script>
        var format = document.querySelector('.format');
        console.log(format.getAttribute('zidingyi')); //getAttribute('')是一个方法。
    </script>
    <!-- 有两种获取属性的操作，1.element.属性（一般是针对元素本身自带的属性）2.element.getAttribute（''）;程序员自己建的属性 -->

    <div class="woqu" gettime="youdian" data-index="touteng" data-zheng-de="a">

    </div>

    <script>
        //修改和移除属性值，可以用原来的调用方法来改变元素的属性值
        format.className = 'nihao'; //这种方法一般用来修改元素自带的属性
        //自定义的属性可以用，元素.setAttribute('修改元素名'，'修改为');这种方法一般用来修改自定义的属性值,也可以用来添加自定义的属性，同样可以用来修改元素自带的值
        format.setAttribute('zidingyi', '2');
        // 这种方法修改类名时直接用class，不用className
        format.setAttribute('class', 'format');
        //清除属性值用removerAttrbute("");
        format.removeAttribute('zidingyi');

        //在H5中有些方法可以获取data开头的自定义属性值,仅用于data开头的数据
        var woqu = document.querySelector('.woqu');
        console.log(woqu.dataset.index); //只能用于是data开头的属性值
        // 如果是有-相连的多个单词，采取驼峰命名方法调用
        console.log(woqu.dataset.zhengDe);
        console.log(woqu.dataset['zhengDe']); //可以用调用对象值的方法来获取
        //dataset是一个对象，里面包含了很多的所有以data开头的数据
    </script>
</body>

</html>